<template>
    <el-dialog
      title="调整排序"
      :fullscreen="dialogFullscree"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="80%"
      class="showDialogClass"
      :before-close="handleClose"
    >
    <div style="height: auto;overflow-y:scroll;">
        <vxe-table
          :data="tableData"
          :header-cell-style="{
            color: '#606266',
            fontSize: '15px',
            fontWeight: '700',
          }"
          ref="xTable"
          style="width: 100%; margin-bottom: 20px"
          row-id="id"
          :indent="indentNumber"
          highlight-current-row
          border
        >
          <vxe-column
            field="fileTitle"
            title="文档标题"
          >
            <template slot-scope="scope">
              <div>
                <img
                  class="docIcon"
                  :src="
                     require(`@/views/office/zzbPskh/assets/images/pdf.png`)
                  "
                >
                <span class="docText">{{ scope.row.fileTitle ? scope.row.fileTitle : "-" }}</span>
              </div>
            </template>
          </vxe-column>
          <vxe-column
            field="fileOrder"
            title="排序"
            width="220"
          />
        </vxe-table>
    </div>
        <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveUpdateSort">保 存</el-button>
        </span>
    </el-dialog>
  </template>
  
  <script>
     import { fileUpdateSort } from "@/api/knowledge/fileBase";
   import Sortable from "sortablejs";
   import store from "@/store";
  export default {
     name:"fileBaseUpdateSort",
     props: {
        subTreeData: Array // 接收父组件传递的数据
      },
     data(){
      return {
          dialogFullscree: false,
          dialogVisible: false,
          tableData: [],
          indentNumber: 24,
      }
     },
     beforeDestroy() {
          if (this.sortable) {
            this.sortable.destroy();
          }
     },
     methods:{
      init(){
          this.dialogVisible = true;
          this.rowDrop();
          this.tableData = this.subTreeData;
      },
      saveUpdateSort(){//保存更改之后的排列顺序
          this.dialogVisible = false;
          const params = {
              data:this.tableData,
              userId: store.getters.user_id.toString(),
              token: store.getters.token.toString(),
              userName: store.getters.userName.toString(),
              isContensDown:0,
          }
          fileUpdateSort(params).then((data)=>{
              if(data.result === true){
                  this.$message({
                      type: 'success',
                      message:"保存成功"
                  })
                  this.$emit(`refresh`);
              }
          })
      },
      rowDrop() {// 行拖动
          this.$nextTick(() => {
              let xTable = this.$refs.xTable;
              this.$nextTick(() => {
              this.sortable = Sortable.create(
                  xTable.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
                  {
                  handle: ".vxe-body--row",
                  animation: 150,
                  onEnd: ({ newIndex, oldIndex }) => {
                      this.tableData.splice(newIndex, 0, this.tableData.splice(oldIndex, 1)[0]);
                      var newArray = this.tableData.slice(0);
                      this.tableData = [];
                      this.$nextTick(function () {
                      this.tableData = newArray;
                      });
                  },
                  }
              );
              });
          });
      },
      handleClose(){
          this.dialogVisible = false;
      }
     }
  }
  </script>
  
  <style scoped>
  >>>.el-dialog__wrapper{
      overflow: hidden;
  }
  .docIcon{
    vertical-align: middle;
    width: 48px;
    height: 48px;
  }
  .docText{
    vertical-align: middle;
  }
  </style>